const {
	resolve
} = require("path"); // node内置核心模块，用来设置路径。

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require("copy-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin')

// 初始化的 webpack 只能处理 JS JSON ES6 模块化语法
module.exports = {
	//打包模式
	mode: "production", //还有development模式
	//入口文件
	entry: "./src/main.js",
	//出口文件
	output: {
		path: resolve(__dirname, "../dist/"),
		filename: "./js/main.js"
	},
	//模块配置，配置loader
	module: {
		rules: [{
			test: /\.css$/i,
			use: [
				//use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
				//"style-loader",  // 将 css 打包到 js 中
				MiniCssExtractPlugin.loader, // 使用 MiniCssExtractPlugin 将 css 打包成独立文件
				'css-loader' // 识别 css 文件
			]
		}, {
			test: /\.less$/i,
			use: [
				// "style-loader",
				// MiniCssExtractPlugin.loader,
				{ // css 使用图片
					loader: MiniCssExtractPlugin.loader,
					options: {
						publicPath: '../'
					}
				},
				"css-loader",
				"less-loader" // 识别 less 文件交由 less 模块处理
			]
		}, { // js 中使用图片
			test: /\.(png|jpg|gif|svg)$/,
			//asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
			type: "asset",
			parser: {
				dataUrlCondition: {
					maxSize: 15 * 1024, // 小于15kb以下的图片会被打包成base64格式
				},
			},
			generator: {
				filename: 'images/[name][ext]'
			}
		}]
	},
	//插件配置
	plugins: [
		new MiniCssExtractPlugin({
			//输出独立文件的文件名
			filename: './css/main.css' // 初始路径依照 webpack 出口
		}),
		new HtmlWebpackPlugin({ // 依照 html 为模板构建一个新的 html 文件并自动将 js css 等资源引入
			template: resolve(__dirname, "../public/index.html"),
			filename: "index.html",
			minify: {
				collapseWhitespace: true,
				keepClosingSlash: true,
				removeComments: true,
				removeRedundantAttributes: true,
				removeScriptTypeAttributes: true,
				removeStyleLinkTypeAttributes: true,
				useShortDoctype: true
			}
		}),
		new ESLintPlugin({
			fix: true
		}),
		new CopyWebpackPlugin({
			patterns: [{
				from: resolve(__dirname, "../public"),
				to: "public",
				//配置复制时忽略的文件
				globOptions: {
					ignore: ["*/index.html"]  // eslint 加了以后只能一个 *
				}
			}],
		}),
		new CleanWebpackPlugin(), // 每次打包前删除之前打包文件
	],
	optimization: {
		minimizer: [
			new CssMinimizerPlugin(),
		],
		minimize: true,
	}
}